<template>
  <div class="app-container">
    <h1>轮播图管理</h1>
    <p style="font-size: 14px;color: #626b79"> 提示：只能上传jpg/png文件，不超过1M,且最多只能有三个轮播图。 </p>
    <el-table
      v-loading="listLoading"
      :data="data"
      element-loading-text="加载中"
      border
      fit
      stripe

      highlight-current-row
    >
      <el-table-column label="编号" align="center">
        <template scope="scope">
          {{scope.$index+1}}
        </template>
      </el-table-column>
      <el-table-column label="预览" align="center">
        <template scope="scope">
          <div style="width: 300px;height: 85px;line-height: 85px;text-align: center">
            <img v-if="scope.row.img" alt="轮播图" :src="scope.row.img" style="width: 300px;height: 85px"/>
            <p v-else>无轮播图</p>
          </div>

        </template>
      </el-table-column>

      <el-table-column label="操作" align="center">
        <template scope="scope">
          <el-upload
            style="display: inline-block"
            ref="upload"
            :data="{...scope.row||{},index:scope.$index}"
            :multiple="false"
            action=""
            accept="image/*"
            :http-request="uploadFile"
            :show-file-list="false"
            :auto-upload="true">
            <el-button slot="trigger" size="small" type="primary" :loading="uploadLoading[scope.$index]">重新选取文件
            </el-button>
          </el-upload>
          <el-popconfirm style="margin-left: 35px"
                         title="确定删除吗？" @onConfirm="deleteFile(scope.row.id)">
            <el-button size="small" slot="reference" type="danger">删除</el-button>
          </el-popconfirm>

        </template>
      </el-table-column>

    </el-table>

  </div>
</template>

<script>
  import request from "@/utils/request";

  export default {
    name: "index",
    data() {
      return {
        data: [],
        listLoading: true,
        uploadLoading: {}
      }
    },
    created() {
      this.initData()
    },
    methods: {
      initData() {
        this.listLoading = true
        request({
          url: '/swiper',
          params: {
            shopId: this.$store.state.user.shop.id
          }
        }).then(v => {
          const data = []
          Array.of(0, 1, 2).forEach(k => {
            data[k] = {...v.data[k]} || {}
          })
          this.data = data
        }).finally(() => {
          this.listLoading = false
        })
      },
      uploadFile: function (e) {
        this.uploadLoading[e.data.index] = true
        console.log(e);
        if (e.file.size > 1024 * 1024) {
          this.$message({
            type: 'warning',
            center: true,
            message: '图片超过1M！',
            duration: 1500
          });
        } else {
          const formData = new FormData()
          e.data.id && formData.append('id', e.data.id)
          formData.append('shopId', this.$store.state.user.shop.id)
          formData.append('file', e.file)
          request({
            url: '/swiper',
            method: 'POST',
            data: formData
          }).then(v => {
            this.$message({
              type: 'success',
              center: true,
              message: '修改成功！',
              duration: 1500
            });
            this.initData()
          }).finally(() => {
            this.uploadLoading[e.data.index] = false
          })
        }
      },
      deleteFile(id) {
        if (!id) {
          this.$message({
            type: 'warn',
            center: true,
            message: '无图片！',
            duration: 1500
          });
          return
        }
        request({
          url: '/swiper',
          method: 'DELETE',
          params: {
            id
          },
        }).then(v => {
          this.$message({
            type: 'success',
            center: true,
            message: '删除成功！',
            duration: 1500
          });
          this.initData()
        }).finally(() => {
        })
      }
    }
  }
</script>

<style scoped>

</style>
